import React from "react";
import {StyleSheet, Dimensions, Text} from "react-native";
import color from "./color";

export function Heading1({style, ...props}: Object) {
    return <Text style={[styles.h1, style]} {...props} />
}

export function Heading2({style, ...props}: Object) {
    return <Text style={[styles.h2, style]} {...props} />
}

export function Heading3({style, ...props}: Object) {
    return <Text style={[styles.h3, style]} {...props} />
}

export function Paragraph({style, ...props}: Object) {
    return <Text style={[styles.p, style]} {...props} />
}

export function Tip({style, ...props}: Object) {
    return <Text style={[styles.tip, style]} {...props} />
}

export function Tip2({style, ...props}: Object) {
    return <Text style={[styles.tip2, style]} {...props} />
}

export function Tip3({style, ...props}: Object) {
    return <Text style={[styles.tip3, style]} {...props} />
}

const styles = StyleSheet.create({
    h1: {
        fontSize: 16,
        color: '#222222',
        fontWeight:'bold'
    },
    h2: {
        fontSize: 14,
        color: 'rgba(0,0,0,0.8)',
    },
    h3: {
        fontSize: 12,
        color: 'rgba(0,0,0,0.5)'
    },
    p: {
        fontSize: 12,
        color: 'rgba(0,0,0,0.7)'
    },
    tip: {
        fontSize: 9,
        color: 'rgba(0,0,0,0.4)'
    },
    tip2: {
        fontSize: 9,
        color: 'rgba(0,0,0,0.8)',
        marginTop:4,
    },
    tip3: {
        fontSize: 8,
    }
})
